<template>
  <div>
    <!-- 日期选择器 -->
    <div class="query-header">
      <span class="text">时间范围</span>
      <el-date-picker
        v-model="time"
        type="datetimerange"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button type="warning" class="query-btn" @click="queryData"
        >查询</el-button
      >
    </div>

    <div id="echartBox" class="echart-box"></div>
  </div>
</template>

<script>
import TimeRange from "@/components/timerange/TimeRange";
// 引入echarts的方法  init
import { init } from "echarts";

// 引入ajax工具函数
import { getOrderChart } from "@/api/echarts";

// 引入时间格式化的工具函数
import { normalizeDate } from "@/utils/tools";

export default {
  components: {
    TimeRange,
  },
  data() {
    return {
      time: ["2019-10-01 00:00:00", "2023-10-10 00:00:00"],
      title: "商品统计",
      options: {
        xData: [],
        yData: [],
      },
    };
  },
  methods: {
    drawLine() {
      //   把myChvart挂载到this上去
      this.myChart = init(document.getElementById("echartBox"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          top: "15",
          left: "15",
          text: this.title,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "15",
          data: ["订单金额"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          top: "15%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.options.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "订单金额",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: this.options.yData,
          },
        ],
      };

      this.myChart.setOption(option);
    },
    handleSize() {
      this.myChart.resize();
    },
    queryData() {
      this.getChartData()
    },
    async getChartData() {
      let date = JSON.stringify(this.time)
      try {
        let res = await getOrderChart(date);
        let {data} = res.data
          console.log(data)
          
          this.options.xData = data.map(v => {
            return normalizeDate(v.orderTime)
          })
          this.options.yData = data.map(v => {
            return v.orderAmount
          })

      } catch(err) {
        console.log(err)
      }
    }
  },
  created() {
    this.getChartData()
  },
  mounted() {
    this.drawLine();

    // 当我们改变窗口大小时 就可以重新绘制
    window.addEventListener("resize", this.handleSize);
  },

  //   在跳转到其他路由 也就是组件销毁前的声明函数
  beforeDestroy() {
    window.removeEventListener("resize", this.handleSize);
  },
  watch: {
    options: {
      deep: true,
      handler(newValue, oldValue) {
        this.myChart.clear()
        this.drawLine()
      }
    }
  }
};
</script>

<style lang="less" scoped>
.echart-box {
  width: 100%;
  height: 500px;
  margin-top: 40px;
  background-color: #fff;
}

.query-header {
  .text {
    margin-right: 10px;
  }

  /deep/.el-date-editor .el-range-separator {
    width: 20%;
  }

  .query-btn {
    margin-left: 10px;
  }
  /deep/.el-range-input {
    width: 200px;
  }
}

</style>